<!-- 集中式布局 -->
<template>
  <div>
    <el-container>
      <el-header style="padding-top: 0;padding-left: 0;">
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
          <el-tab-pane v-for="(item2,index2) in menuList[0].list" :key="item2.name" :label="item2.name" :name="item2.name"></el-tab-pane>
        </el-tabs>
      </el-header>
      <el-main style="padding-top: 0;">
        <keep-alive>
          <router-view />
        </keep-alive>
      </el-main>

    </el-container>

  </div>
</template>

<script>
  import moment from 'moment'
  export default {
    data() {
      return {
        id: undefined,
        path: undefined,
        menuList: [],
        activeName: '',
        activeList: [],
        name: '',
        childShowType: '',
        defaultActive: '0',
        item3: null,
        tabPosition: "收藏",
        collect: [],
        searchData: [],
        searchResult: [],
        state: '',
        restaurants: [],
        key: [],
        searchFlag: false,
        opends: ['666']

      };
    },
    activated() {

    },
    mounted: function() {
      console.log("是是是")
    },
    created() {

    },
    methods: {
      init(id, childShowType) {
        console.log(id)
        this.id = id
        this.$nextTick(() => {
          //查询下级菜单
          const menuList = JSON.parse(sessionStorage.getItem('menuList') || '[]')
          this.menuList = menuList.filter(item => item.type == 0 && item.parenttopId == id)
          console.log(this.menuList)
          //默认选中第一个
          var menu = this.menuList[0]

          this.activeList = menu.list

          //默认子集第一个
          var menu3 = menu.list[0]
          this.activeName = menu3.name;

          let route = JSON.parse(sessionStorage.getItem('dynamicMenuRoutes') || '[]').filter(item => item.meta.menuId === id)
          console.log('route',route)
          let menuRoute = route[0].children[0]
          this.item3 = menuRoute
          if(!this.item3.meta.iframeUrl){
            console.log("跳转")
            this.$router.replace(
              {
                name: this.item3.name,
              }
            )
          }
        })
      },
      handleClick(tab, event) {
        console.log(tab, event);
        var menu = this.activeList[tab.index]
        let route = JSON.parse(sessionStorage.getItem('dynamicMenuRoutes') || '[]').filter(item => item.meta.menuId ===
          menu.menuId)
        this.item3 = route[0]
        console.log(route)
        if (!this.item3.meta.iframeUrl) {
          var $route = this.$route
          this.$router.replace({
            name: `item${menu.menuId}`,
          })
        }
      }
    }
  };
</script>

<style scoped lang="scss">
  .mutilIcon {
    position: absolute;
    top: 50%;
    margin-top: -10px;
    left: 80%;
  }

  .el-menu-item {
    padding-left: 10px !important;
    text-align: left;

  }

  .el-submenu .el-submenu-title {
    padding-left: 5px !important;
    text-align: left !important;
  }
</style>
